/**
 * Created by ritamashin on 2017/11/1.
 */
import React, {PureComponent} from 'react'
import {View, Text, StyleSheet, FlatList} from 'react-native'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as actions from '../actions'
import store from '../store'
import {COLOR, SCREEN_WIDTH} from '../config'
import {CachedImage} from 'react-native-img-cache'

class HotSale extends PureComponent{

    static navigationOptions = ({navigation}) => ({
        title : '榜单',
    });

    // 构造
      constructor(props) {
        super(props);
        store.dispatch(actions.getHotSaleItems());
      }




    render(){
          let {items} = this.props;
        return (
            <FlatList data = {items}
                      keyExtractor = {this._keyExtractor}
                      renderItem = { this._renderItem}
                      numColumns={2}
                      style={styles.flatList}
                      ItemSeparatorComponent={this._renderSeparatorComponent}
                      showsVerticalScrollIndicator={false}

            />
        )
    }
    _keyExtractor = (rowInfo, index) =>{
        return index;
    }
    _renderItem = (rowInfo)=> {
        let giftItem = rowInfo.item.data;
        let index = rowInfo.index;
        let auStyle =  index % 2 === 0 ? {marginRight : 5} : {marginLeft : 5};

        return <View style={[styles.item, auStyle]}>
            <CachedImage source={{uri : giftItem['cover_image_url']}}
                         style={styles.item_cover}/>
            <Text numberOfLines={2}
                  style={styles.item_text}>{giftItem['name']}</Text>
            <View style={styles.item_sub_container}>
                <Text style={styles.item_price_text}>{`¥${giftItem['price']}`}</Text>
                <View style={{flex: 1}}/>
                <Text style={styles.item_price_praise}>{`${giftItem['favorites_count']}`}</Text>
            </View>

        </View>
    }
    _renderSeparatorComponent = () => {
        return <View style={{height : 8}}/>
    }
}



const styles = StyleSheet.create({
    text : {
        width : 100,
        height : 25,
    },
    flatList : {
        backgroundColor: COLOR.themeBackGroundRedColor,
        paddingLeft : 10,
        paddingRight : 10,
    },
    item : {
        borderColor : COLOR.borderColor,
        borderRadius : 5,
        borderWidth : 0.5,
        flex: 1,
    },
    item_cover : {
        width: (SCREEN_WIDTH - 30) / 2,
        height: (SCREEN_WIDTH - 30) / 2 * 0.9,
    },
    item_text : {
        height : 40,
        marginTop : 4,
        marginLeft : 8,
    },
    item_sub_container : {
        marginTop: 4,
        marginLeft: 8,
        flexDirection : 'row'
    },
    item_price_text : {
        color: COLOR.themeRedColor,
        fontSize : 15,
    },
    item_price_praise : {
        fontSize: 12,
        color: COLOR.subTextColor,
    }

});

function mapStateToProps(state) {
    let {hotSale} = state;
    let {items} = hotSale;
    return {
        ...this.props,
        items
    }
}
function mapDispatchToProps(dispatch) {
    return bindActionCreators(actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(HotSale);